<template>
	<div class="max">
		<my-header>
			<div slot="left">
				<router-link to="/announcement">
					<img src="../../../static/img/icon-back.png" alt=""  height="15px" style="vertical-align: middle;">
				</router-link>
			</div>
			<div slot="title">
				通知公告
			</div>
		</my-header>
		<div class="cont-nof">
			<template v-if="article.content">
				<article class="weui-article tl" style="background: #fff;padding-bottom: 10px;">
					<h1 class="tc">
						{{article.title}}
					</h1>
					<p class="tj" style="font-size: 1.6rem;" v-html="article.content"></p>
					<div class="tr time">时间：{{article.createTime}}</div>
				</article>
			</template>
			<template v-if="article.link">
				<iframe :src="article.link" frameborder="0" class="max"></iframe>
			</template>
			<div class="readList more oh" v-if="access==='kindergarten'">
				<div class="read-cell">
					<div class="fl tl read-cell_1">已读：</div>
					<div class="fl tj read-cell_2">{{readList.join("、")}}<span>（共{{readList.length}}人）</span></div>
				</div>
				<div class="read-cell">
					<div class="fl tl read-cell_1">已确认：</div>
					<div class="fl tj read-cell_2">
						{{confirmList.join("、")}}<span>（共{{confirmList.length}}人）</span>
					</div>
				</div>
			</div>
			<div v-if="access==='kindergarten'" class="weui-btn weui-btn_warn del-at" @click="deleteFn">
				删除
			</div>
			<div class="makesure" v-if="access=='kinsfolk'&&!article.confirm&&custom==false">
				<a class="weui-btn weui-btn_block weui-btn_primary my-weui-btn" @click="confirmFn">我认可</a>
			</div>
		</div>
	</div>
</template>

<script>
	import wx from "weixin-js-sdk";

	export default {
		data() {
			return {
				custom: this.$Cookies.get('custom'),
				article: {},
				access: '',
				readList: [],
				confirmList: []
			}
		},
		methods: {
      deleteFn(){
        this.$http.deleteNotice({id:this.article.id}).then(resp=>{
          this.$router.push('/announcement');
        })
      },
			back() {
				if (!!this.$Cookies.get('from')) {
					this.$router.push('/announcement');
				} else {
					wx.closeWindow();
				}
			},
			confirmFn() {
				this.$http.kinsfolkConfirmNotice(this.article).then(resp => {
					this.$weui.toast('感谢您的反馈');
					this.article.confirm = 1;
				});
			},
			fetchNoticeKinsfolk() {
				this.$http.fetchNoticeKinsfolk({
					noticeId: this.article.id
				}).then(resp => {
					let data = resp.data;
					this.readList = data.filter(notice => notice.read === 1).map(notice => notice.kinsfolkName);
					this.confirmList = data.filter(notice => notice.confirm === 1).map(notice => notice.kinsfolkName);
				})
			}
		},
		created() {
			this.article = this.$route.query;
			let loginType = this.$Cookies.get('loginType');
			this.access = loginType;
			if (loginType === 'kindergarten') {
				this.fetchNoticeKinsfolk();
			} else if (loginType === 'kinsfolk') {
				this.$http.kinsfolkReadNotice(this.article);
			}
		}
	}
</script>

<style scoped>
	.readList {
		width: 95%;
		margin: auto;
	}

	.read-cell {
		height: 100%;
		width: 100%;
	}

	.read-cell_1 {
		margin: 1rem 0 0 0;
	}

	.read-cell_2 {
		width: calc(100% - 5rem);
		margin: 1rem 0 0 0;
	}

	.makesure {
		width: 98%;
		margin: auto;
	}

	.time {
		color: rgba(189, 189, 189, 1);
		font-size: 12px;
	}

	.del-at {
		background: #FA5151;
		color: #FFFFFF;
		margin-top: 50px;
		padding: 0.5rem;
		font-weight: normal;
	}
</style>
